<template>
  <el-row class="bar" type="flex" justify="space-between">
    <el-col>
      <el-button type="text" icon="el-icon-back" size="small" @click="$router.back()">返回</el-button>

      <el-button name="delete" class="item-space" type="text" size="small" @click="handleClick">清空</el-button>
      <el-button name="undo" size="small" type="text" @click="handleClick">撤销</el-button>
      <el-button name="redo" size="small" type="text" @click="handleClick">恢复</el-button>
      <el-button name="copy" size="small" type="text" @click="handleClick">复制</el-button>
      <el-button name="cut" size="small" type="text" @click="handleClick">剪切</el-button>
      <el-button name="paste" size="small" type="text" @click="handleClick">粘贴</el-button>
    </el-col>
    <el-col>
      <el-row type="flex" justify="end">
        <el-button name="save" type="warning" size="small" icon="el-icon-back" @click="toBasic">基本信息</el-button>

        <el-button name="save" type="primary" size="small" @click="handleClick">发布流程</el-button>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>

// import { DataUri } from '@antv/x6'

export default {
  name: 'Index',
  props: {
    // 父组件传递过来
    flowGraph: {
      type: null, // 实例对象竟然是null
      default: null,
      required: true
    },
    saveFunc: {
      type: Function,
      default: null
    },
    toBasic: {
      type: Function,
      defautlt: null
    }
  },
  data() {
    return {}
  },
  methods: {
    // 复制
    copy() {
      const { graph } = this.flowGraph
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.copy(cells)
      }
      return false
    },
    // 剪切
    cut() {
      const { graph } = this.flowGraph
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.cut(cells)
      }
      return false
    },
    // 粘贴
    paste() {
      const { graph } = this.flowGraph
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 32 })
        graph.cleanSelection()
        graph.select(cells)
      }
      return false
    },
    // 点击事件分发
    handleClick(event) {
      const { graph } = this.flowGraph
      const name = event.currentTarget.name
      switch (name) {
        case 'undo':
          graph.history.undo()
          break
        case 'redo':
          graph.history.redo()
          break
        case 'delete':
          graph.clearCells()
          break
        case 'save':
          // 保存
          // graph.toPNG((datauri) => {
          //   DataUri.downloadDataUri(datauri, 'flow.png')
          // })
          this.saveFunc && this.saveFunc() // 调用保存函数
          break
        case 'print':
          graph.printPreview()
          break
        case 'copy':
          this.copy()
          break
        case 'cut':
          this.cut()
          break
        case 'paste':
          this.paste()
          break
        default:
          break
      }
    }

  }
}

</script>

<style scoped>
.bar{
  width: 100%;
}
.item-space{
  margin-left:16px;
}
</style>
